
<template>
  <div class="Emp_approval">
    <section class='section'>
      <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane label="待办" name="a">
        <ul class="wait_list" v-if='tab_com.length'>
          <li class="wait_items" v-for='(k,i) in tab_com' @click.stop='gotab1(k)'>
            <div class="wait_title">
                <span v-if="k.type=='请'" class="wait_sub" >请</span>
                <span v-else class="wait_sub" :class='{xiaojia:k.type=="销"}'>销</span>
                <span>{{k.wfBusinessProcessData.emplname}}的{{k.executeType=="3" || k.executeType=="4" ? '销假' : '请假'}}申请</span>
                <span class="wait_time">{{k.leave_name}}（共{{k.wfBusinessProcessData.leaveDay}}天）</span>
            </div>
            <div class="wait_info">
                <p>
                    <i class="fa fa-clock-o" aria-hidden="true"></i>
                    <span>{{k.wfBusinessProcessData.startTime | handleDisplayDate}}&nbsp;{{k.wfBusinessProcessData.startTimeHalfDaySign | ampm}}</span>
                    <span class="time_connect">至</span>
                    <span>{{k.wfBusinessProcessData.endTime | handleDisplayDate}}&nbsp;{{k.wfBusinessProcessData.endTimeHalfDaySign | ampm}}</span>
                </p>
            </div>
          </li>
       
        </ul>

          <section class='section s2' v-else>
            <div class="imgBox"><img src="../../../static/images/no_data.jpg" alt=""></div>
            <!-- <div class="imgBox"><img src="../../../static/images/nodata.svg" alt=""></div> -->
            <!-- <p class="data">您暂时还没有相关审批</p> -->
          </section>
        </el-tab-pane>
      <el-tab-pane label="待阅" name="d">
        <ul class="wait_list" v-if='tab2 && tab2.length'>
          <li class="wait_items" v-for='(k,i) in tab2' @click.stop='gotab2(k)'>
            <div class="wait_title">
                <span v-if="k.type=='请'" class="wait_sub" >请</span>
                <span v-else class="wait_sub" :class='{xiaojia:k.type=="销"}'>销</span>
                <span>{{k.wfBusinessProcessData.emplname}}的{{k.executeType=="3" || k.executeType=="4" ? '销假' : '请假'}}申请</span>
                <span class="wait_time">{{k.leave_name}}（共{{k.wfBusinessProcessData.leaveDay}}天）</span>
            </div>
            <div class="wait_info">
              <p>
                <i class="fa fa-clock-o" aria-hidden="true"></i>
                <span>{{k.wfBusinessProcessData.startTime | handleDisplayDate}}&nbsp;{{k.wfBusinessProcessData.startTimeHalfDaySign | ampm}}</span>
                <span class="time_connect">至</span>
                <span>{{k.wfBusinessProcessData.endTime | handleDisplayDate}}&nbsp;{{k.wfBusinessProcessData.endTimeHalfDaySign | ampm}}</span>
              </p>
              <!-- <p>
                <i class="fa fa-user-o" aria-hidden="true"></i>
                <span>{{k.dept_name}}</span>
              </p>
              <p>
                <i class="fa fa-arrow-circle-o-right"></i> 
                <span :class="handleColor(k.audit_status_name)">{{k.audit_status_name}}</span>
              </p> -->
            </div>
          </li>
        
        </ul>
        <section class='section s2' v-else>
            
            <div class="imgBox"><img src="../../../static/images/no_data.jpg" alt=""></div>
            <!-- <div class="imgBox"><img src="../../../static/images/nodata.svg" alt=""></div> -->
            <!-- <p class="data">暂无数据</p> -->
        </section>
      </el-tab-pane>
      <el-tab-pane label="我发起" name="c">
        <ul class="commit_list" v-if='tab3 && tab3.length'>
          <li class="commit_items" v-for='(k,i) in tab3' @click.stop='gotab3(k)'> 
            <div>
              <span class="commit_sub"></span>
              <b>{{k.wfBusinessProcessData.processTypeName}}</b>
              <span>共{{k.wfBusinessProcessData.leaveDay}}天</span>
              <span class="commit_time">
                  <span>{{k.wfBusinessProcessData.startTime | handleDisplayDate}}&nbsp;{{k.wfBusinessProcessData.startTimeHalfDaySign | ampm}}</span>
                  <span class="time_connect">至</span>
                  <span>{{k.wfBusinessProcessData.endTime | handleDisplayDate}}&nbsp;{{k.wfBusinessProcessData.endTimeHalfDaySign | ampm}}</span>
              </span>
            </div>
            <p class="commit_reason">{{k.wfBusinessProcessData.leaveReason}}</p>
          </li>
    
        </ul>

         <section class='section s2' v-else>
            <div class="imgBox"><img src="../../../static/images/no_data.jpg" alt=""></div>
            <!-- <div class="imgBox"><img src="../../../static/images/no_data.jpg" alt=""></div> -->
            <!-- <p class="data">暂无数据</p> -->
        </section>
      </el-tab-pane>
    </el-tabs>
  	  <b class="tipA" v-if="tabNumA !== 0">{{tabNumA}}</b>
    	<b class="tipB" v-if="tabNumR !== 0">{{tabNumR}}</b>
      <div class="query_all" ><a @click.stop='gotoList' >查看全部</a></div>
    </section>
  </div>
</template>

<script>
// import Axios from 'axios'
import Vue from 'vue'
import { Tabs, TabPane, Badge } from 'element-ui'
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Badge)

export default {
	name: 'Emp_approval',
	data() {
		return {
			activeName2: 'a',
			emplid: null,
			tab2: [],
			tab3: [],
			numA: 1,
			numB: 1
		}
	},

	props: ['tab', 'tabNumA', 'tabNumR'],

	computed: {
		tab_com() {
			if (this.tab.length) {
				let result = []
				this.tab.forEach(ele => {
					if (ele.executeType == 1) {
						ele.type = '请'
					} else if (ele.executeType == 2) {
						ele.type = '代'
					} else if (ele.executeType == 3) {
						ele.type = '销'
					}
					result.push(ele)
				})

				return result
			} else {
				return []
			}
		}
	},

	filters: {
		ampm: function(value) {
			if (value == '1') {
				return '上午'
			} else if (value == '2') {
				return '下午'
			}
		},
		handleDisplayDate: function(val){
				if (val) {
							if (typeof val === 'string' && val.split(' ').length>1) {
									return val.split(' ')[0]
							}
						var dataObj = new Date(val);   
						var year = dataObj.getFullYear();
						var month = dataObj.getMonth() + 1;
						month = month > 9 ? month : '0' + month;
						var day = dataObj.getDate();
						day = day > 9 ? day : '0' + day;
						return year + "-" + month + "-" + day 
				} else {
						return ''
				}
		},
		handleTitle: function(val){
			return val == '1' ? '请' : (val == '3' ? '销' : '请')
		},
		handleStatus: function(status){
			return status == 1 ? '已备案' : (status == 2 ? '审批中' : '已拒绝')
		}
	},

	watch: {
		activeName2: function(newVal, oldVal) {
			switch (newVal) {
			case 'a':
				this.getWaitAppro()
				break
			case 'd':
				this.getDoneAprro()
				break
			case 'c':
				this.getStart()
				break
			}
		}
	},

	methods: {
		getWaitAppro: function() {
			let params = {
				pageNo: 1,
				pageSize: 3
			}
			this.Axios
				.Post(this.URL.AuditBylist.url, params)
				.then(res => {
					var result = res.data.datas
					var total = res.data.total
					this.$emit('update:tab', result)
					this.$emit('update:tabNumA', total)
				})
		},

		getDoneAprro: function() {
			this.tab2 = []
			let params = {
				pageNo: 1,
				pageSize: 3,
			}
			this.Axios.Post(this.URL.findCopyToMeFlow.url, params).then(res => {
				this.tab2 = []
				res.data.datas.forEach(ele => {
					if (ele.executeType == 1) {
						ele.type = '请'
					} else if (ele.executeType == 2) {
						ele.type = '代'
					} else if (ele.executeType == 3) {
						ele.type = '销'
					}
					this.tab2.push(ele)

				})
				var total = res.data.total
				this.$emit('update:tabNumR', total)
			})
		},

		getStart: function() {
			let params = {
				pageSize: 3,
				pageNo: 1
			}
			this.Axios.Post(this.URL.myleaveByrecord.url, params).then(res => {
				this.tab3 = []
				res.data.datas.forEach(ele => {
					if (ele.executeType == 1) {
						ele.type = '请'
					} else if (ele.executeType == 2) {
						ele.type = '代'
					} else if (ele.executeType == 3) {
						ele.type = '销'
					}
					this.tab3.push(ele)
				})
			})
		},

		handleColor(str) {
			switch (str) {
			case '已审批':
				return 'pass'
				break
			case '已备案':
				return 'pass'
				break
			case '已同意':
				return 'pass'
				break
			case '已驳回':
				return 'nook'
				break
			case '已拒绝':
				return 'nook'
				break
			default:
				return 'checking'
				break
			}
		},

		handleClick(tab, event) {
			if (this.activeName2 == 'first') {
				event.target.style.borderLeft = 0
			}
		},
		gotoList() {
			var newTab
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			if (location.hostname !== 'localhost') {
				newTab.location.href = this.Axios.baseURI  + '/#/requestVacation?activeName=' + this.activeName2
			} else {
				newTab.location.href = location.origin  + '/#/requestVacation?activeName='+ this.activeName2
			}
    
		},
		clearLocalStorage:function(newTab){

			var token = newTab.localStorage.getItem('token')
			var token1 = localStorage.getItem('token')
			if (token && token1 && token !== token1 ) {
				newTab.localStorage.clear()
			}
		},
		gotab1(k) {
			let params = {
				applyId: k.id,
				exectionId: k.id
			}

			var newTab
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			if (location.hostname !== 'localhost') {
				newTab.location.href = this.Axios.baseURI  + '/#/requestVacation/t1detail?id=' + k.id
			} else {
				newTab.location.href = location.origin  + '/#/requestVacation/t1detail?id='+ k.id
			}
		},
		gotab2(k) {
			let params = {
				applyId: k.id,
				exectionId: k.exectionId,
				cId: k.cId
			}
			var newTab
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			localStorage.setItem('tab4Params', JSON.stringify(params))
			if (location.hostname !== 'localhost') {
				newTab.location.href = this.Axios.baseURI  + '/#/requestVacation/t4detail?id=' + (k.id)
			} else {
				newTab.location.href = location.origin  + '/#/requestVacation/t4detail?id='+ (k.id)
			}
      
		},
		gotab3(k) {
			let params = {
				applyId: k.id,
				exectionId: k.id
			}
			var newTab
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			if (location.hostname !== 'localhost') {
				newTab.location.href = this.Axios.baseURI  + '/#/requestVacation/t3detail?id=' + k.id
			} else {
				newTab.location.href = location.origin  + '/#/requestVacation/t3detail?id='+ k.id
			}

		},

	},

	mounted() {
		this.emplid = window.location.href && window.location.href.split('=')[1];
		window.getWaitAppro = this.getWaitAppro;
		window.getDoneAprro = this.getDoneAprro;
	}
}
</script>


<style scoped>
.pass {
  color: #339966;
}
.section {
  position: relative;
}

.title {
  padding: 12px 10px;
  div,
  h2 {
    display: inline-block;
    padding: 0 10px;
  }
  h2 {
    font-size: 16px;
    font-style: normal;
  }
  div {
    padding-top: 2px;
    float: right;
  }
}
</style>


<style lang='less'>


.tipA {
  position: absolute;
  top: 8px;
  left: 55px;
  background-color: #e24040;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  width: 22px;
  height: 16px;
  line-height: 16px;
  z-index: 1100;
  text-align: center;
  border-radius: 50%;
}
.tipB {
  position: absolute;
  top: 8px;
  left: 143px;
  background-color: #e24040;
  color: #fff;
  padding-left: 0.02rem;
  font-size: 12px;
  font-weight: normal;
  width: 22px;
  height: 16px;
  line-height: 16px;
  z-index: 1100;
  text-align: center;
  border-radius: 50%;
}

.nook {
  color: #c7254e;
}

.checking {
  color: #38f;
}
.s2 {
  div.imgBox {
    // background-color: rgba(0, 0, 0, 0.01);
    text-align: center;
    border-radius: 50%;
    // padding: 30px;

    width: 160px;

    margin: 0 auto;
    margin-top: 50px;
    img {
      display: inline-block;
      height: 120px;
      width: 120px;
    }
  }
  p.data {
    margin-top: 25px;
    text-align: center;
  }
}


.Emp_approval .wait_list .wait_info p {
  padding: 4px 0;
}

.Emp_approval {
  position: relative;
}
.Emp_approval .query_all {
  position: absolute;
  right: 20px;
  top: 15px;
  color: #38f;
  cursor: pointer;
  font-size: 12px;
}
.Emp_approval .el-tabs__item {
  height: auto;
  padding: 0 28px;
  color: #000;
  border-radius: 0;

  font-weight: 900;
}
.Emp_approval .el-tabs__header {
  margin: 0;
}
.Emp_approval .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-radius: 0;
  border-top-color: #38f;
  border-top-width: 2px;
}
.Emp_approval .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-top-width: 2px;
}

.Emp_approval .el-tabs--card > .el-tabs__header .el-tabs__nav-scroll {
  margin-left: -1px;
}
.Emp_approval .item {
  margin-top: 10px;
  margin-right: 40px;
}

.Emp_approval {
  overflow: auto;
}
.Emp_approval .wait_list .wait_items {
  padding: 4px 20px 4px 20px;
  border-bottom: 1px solid #ecf0f5;
  cursor: pointer;
}
.Emp_approval .wait_list .wait_items:nth-last-child(1) {
  border: 0;
}
.Emp_approval .wait_list .wait_items .wait_title {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  position: relative;
  padding-left:50px;
}
.Emp_approval .wait_list .wait_title .wait_sub {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: #38f;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  border-radius: 25px;
  position: absolute;
  top: 10px;
  left: 8px;
}
.Emp_approval .wait_list .wait_title .wait_sub.xiaojia {
  background-color: #75d155;
}
.Emp_approval .wait_list .wait_title .wait_time {
  float: right;
  color: #999;
}
.Emp_approval .wait_list .wait_info {
  padding: 1px 10px 1px 50px;

  color: #999;
}
.Emp_approval .wait_list .fa-clock-o.fa-user-o.fa-arrow-circle-o-right {
  color: #ccc;
  margin-right: 5px;
}
.Emp_approval .wait_list .info_tip {
  color: #38f;
}
.Emp_approval .commit_list .commit_items {
  padding: 6px 20px;
  border-bottom: 1px solid #ecf0f5;
  cursor: pointer;
}
.Emp_approval .commit_list li.commit_items:last-child {
	border-bottom:none;
}
.Emp_approval .commit_list .commit_sub {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #38f;
  border-radius: 8px;
}
.Emp_approval .commit_list b {
  margin: 0 10px;
}
.Emp_approval .commit_list .commit_time {
  float: right;
  color: #999;
}
.Emp_approval .commit_list .commit_reason {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.Emp_approval .time_connect {
  margin: 0 5px;
}
</style>
